import useCustomerService from '@/components/useCustomerService';
import { Icon, Popup } from '@antmjs/vantui';
import { Image, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState } from 'react';

export default function useReservationSuccess(props: {
  time: string;
  address?: string;
  code: string;
  onClose?: Function;
}) {
  const [show, setShow] = useState<boolean>(false);
  const { renderNode: renderServiceNode, open: openService } =
    useCustomerService();

  function renderNode() {
    return (
      <>
        <Popup
          show={show}
          className='w-[670px] -mt-20'
          style={{
            overflow: 'initial',
            backgroundColor: 'transparent',
          }}
        >
          <View className=' flex justify-end mb-2'>
            <Icon
              name='close'
              className=' text-3xl text-white'
              onClick={() => {
                setShow(false);
                props.onClose && props.onClose();
              }}
            />
          </View>
          <View
            className=' rounded-t-xl pb-2 relative pt-[130px]'
            style={{
              background: 'linear-gradient(to bottom, #D3EDFF, #FFFFFF 100%)',
            }}
          >
            {/* icon */}
            <View
              className='w-[242px] h-[212px] absolute left-1/2 -translate-x-1/2 -top-[120px] z-10 bg-cover'
              style={{
                backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-success1.png)`,
              }}
            ></View>

            <Text className=' text-lg text-black font-bold text-center block'>
              预约成功
            </Text>
            <Text className=' text-sm text-black text-center block'>
              恭喜你预约成功 请查看以下预览信息
            </Text>

            <View className='px-4 mt-[100px]'>
              <Text className=' text-gary1 block text-sm mb-1'>预约时段</Text>
              <Text className=' text-lg font-bold text-black block'>
                {props.time}
              </Text>

              {props.address && (
                <>
                  <Text className=' text-gary1 block text-sm mb-1 mt-4'>
                    咨询地点
                  </Text>
                  <Text className=' text-lg font-bold text-black block'>
                    {props.address}
                  </Text>
                </>
              )}
            </View>
          </View>

          <View
            className='w-full h-[244px] -mt-[3px] pt-[60px] rounded-b-xl overflow-hidden'
            style={{
              backgroundSize: '100% 100%',
              backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/card-footer1.png)`,
            }}
          >
            <View className='bg-[#EFF3FA] text-center flex items-center justify-center text-xs mx-6 text-gary1 py-5 relative'>
              <Image
                onClick={() => {
                  if (!props?.code) return;
                  Taro.setClipboardData({
                    data: props.code,
                  });
                }}
                className='w-[40px] h-[40px] absolute right-1 top-1'
                mode='aspectFill'
                src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-copy.svg'
              />
              核销码
              <Text className='text-[52px] font-bold text-black ml-2'>
                {props?.code}
              </Text>
            </View>
            <View className=' text-center text-xs mt-2 text-gary3'>
              预约成功，请联系
              <Text className=' text-primary' onClick={() => openService()}>
                服务专员
              </Text>
              确认地点等具体信息
            </View>
          </View>
        </Popup>

        {renderServiceNode()}
      </>
    );
  }

  return {
    open: () => setShow(true),
    renderNode,
  };
}
